<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>会员权益 - 智能洗护中心</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#35C2C1',
                        secondary: '#FF7D00',
                        success: '#22C55E',
                        danger: '#EF4444',
                        dark: '#333333',
                        light: '#F5F5F5',
                        gray: '#999999',
                        lightgray: '#EEEEEE',
                        vip: {
                            1: '#CCCCCC',    // 普通会员
                            2: '#22C55E',    // 银卡会员
                            3: '#3B82F6',    // 金卡会员
                            4: '#8B5CF6',    // 铂金会员
                            5: '#F59E0B'     // 钻石会员
                        }
                    },
                    fontFamily: {
                        sans: ['PingFang SC', 'Helvetica Neue', 'Arial', 'sans-serif']
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .benefit-card {
                transition: all 0.2s ease;
            }
            .benefit-card:hover {
                transform: translateY(-2px);
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            }
            .benefit-card.expired {
                opacity: 0.6;
            }
            .benefit-card.expired:hover {
                transform: none;
                box-shadow: none;
                cursor: not-allowed;
            }
            .progress-bar {
                height: 6px;
                background-color: #EEEEEE;
                border-radius: 3px;
                overflow: hidden;
            }
            .progress-value {
                height: 100%;
                background-color: #35C2C1;
                border-radius: 3px;
            }
            .badge {
                display: inline-block;
                padding: 0.15rem 0.4rem;
                border-radius: 12px;
                font-size: 0.75rem;
                font-weight: 500;
            }
        }
    </style>
</head>
<body class="bg-light font-sans text-dark min-h-screen">
    <!-- 小程序容器 -->
    <div class="max-w-md mx-auto bg-white min-h-screen relative">
        <!-- 顶部导航栏 -->
        <header class="bg-white text-dark py-4 px-5 flex justify-between items-center fixed top-0 left-0 right-0 max-w-md mx-auto z-10 border-b border-lightgray">
            <a href="my-page.html" class="text-dark">
                <i class="fa fa-arrow-left text-lg"></i>
            </a>
            <div class="text-lg font-bold">会员权益</div>
            <div class="w-6"></div> <!-- 占位元素，使标题居中 -->
        </header>


        <!-- 权益说明 -->
        <div class="bg-white p-3 mt-1 border-b border-lightgray text-sm text-gray flex items-center">
            <i class="fa fa-info-circle text-primary mr-2"></i>
            <span>权益根据您开通会员的累计月数自动解锁，过期未使用将失效</span>
        </div>

        <!-- 主内容区 -->
        <main class="pb-16">
            <!-- 权益分类标签 -->
            <div class="bg-white border-b border-lightgray overflow-x-auto">
                <div class="flex">
                    <button class="tab-btn px-4 py-3 text-primary border-b-2 border-primary font-medium whitespace-nowrap">
                        全部权益
                    </button>
                    <button class="tab-btn px-4 py-3 text-gray border-b-2 border-transparent whitespace-nowrap">
                        有效权益
                    </button>
                    <button class="tab-btn px-4 py-3 text-gray border-b-2 border-transparent whitespace-nowrap">
                        已过期
                    </button>
                </div>
            </div>
            
            <!-- 权益列表 - 根据开通会员次数解锁 -->
            <div class="bg-white">
                <div class="divide-y divide-lightgray">
                    <!-- 开通3个月解锁权益 -->
                    <div class="benefit-card p-4 cursor-pointer" onclick="window.location='benefit-detail.html?id=1'">
                        <div class="flex items-start">
                            <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary flex-shrink-0">
                                <i class="fa fa-tint text-xl"></i>
                            </div>
                            <div class="ml-3 flex-1">
                                <div class="flex justify-between">
                                    <div>
                                        <h3 class="text-base font-medium">每月免费基础洗头</h3>
                                    </div>
                                    <i class="fa fa-angle-right text-gray"></i>
                                </div>
                                <div class="flex flex-wrap gap-x-6 gap-y-2 mt-2 text-sm">
                                    <div class="flex items-center text-gray">
                                        <i class="fa fa-refresh mr-1 text-primary"></i>
                                        <span>剩余 2/4 </span>
                                    </div>
                                    <div class="flex items-center text-gray">
                                        <i class="fa fa-calendar mr-1 text-primary"></i>
                                        <span>本月内有效</span>
                                    </div>
                                </div>
                                <p class="text-xs text-gray mt-2">包含智能水温调节、穴位按摩和自动冲洗服务</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 开通6个月解锁权益 -->
                    <div class="benefit-card p-4 cursor-pointer" onclick="window.location='benefit-detail.html?id=2'">
                        <div class="flex items-start">
                            <div class="w-12 h-12 rounded-full bg-secondary/10 flex items-center justify-center text-secondary flex-shrink-0">
                                <i class="fa fa-star text-xl"></i>
                            </div>
                            <div class="ml-3 flex-1">
                                <div class="flex justify-between">
                                    <div>
                                        <h3 class="text-base font-medium">每月免费头皮检测</h3>
                                    </div>
                                    <i class="fa fa-angle-right text-gray"></i>
                                </div>
                                <div class="flex flex-wrap gap-x-6 gap-y-2 mt-2 text-sm">
                                    <div class="flex items-center text-gray">
                                        <i class="fa fa-refresh mr-1 text-primary"></i>
                                        <span>剩余 1/2 </span>
                                    </div>
                                    <div class="flex items-center text-gray">
                                        <i class="fa fa-calendar mr-1 text-primary"></i>
                                        <span>本月内有效</span>
                                    </div>
                                </div>
                                <p class="text-xs text-gray mt-2">AI智能头皮分析，生成个性化护理方案</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 开通12个月解锁权益 -->
                    <div class="benefit-card p-4 cursor-pointer" onclick="window.location='benefit-detail.html?id=3'">
                        <div class="flex items-start">
                            <div class="w-12 h-12 rounded-full bg-success/10 flex items-center justify-center text-success flex-shrink-0">
                                <i class="fa fa-gift text-xl"></i>
                            </div>
                            <div class="ml-3 flex-1">
                                <div class="flex justify-between">
                                    <div>
                                        <h3 class="text-base font-medium">会员生日礼遇</h3>
                                    </div>
                                    <i class="fa fa-angle-right text-gray"></i>
                                </div>
                                <div class="flex flex-wrap gap-x-6 gap-y-2 mt-2 text-sm">
                                    <div class="flex items-center text-gray">
                                        <i class="fa fa-refresh mr-1 text-primary"></i>
                                        <span>剩余 1/1 </span>
                                    </div>
                                    <div class="flex items-center text-gray">
                                        <i class="fa fa-calendar mr-1 text-primary"></i>
                                        <span>2024-08-31前有效</span>
                                    </div>
                                </div>
                                <p class="text-xs text-gray mt-2">生日当月可享受高级护理套餐一次</p>
                            </div>
                        </div>
                    </div>
                    
                    
                    <!-- 已过期权益 -->
                    <div class="benefit-card expired p-4">
                        <div class="flex items-start">
                            <div class="w-12 h-12 rounded-full bg-gray/10 flex items-center justify-center text-gray flex-shrink-0">
                                <i class="fa fa-cut text-xl"></i>
                            </div>
                            <div class="ml-3 flex-1">
                                <div class="flex justify-between">
                                    <div>
                                        <h3 class="text-base font-medium">造型设计优惠</h3>
                                        <span class="text-xs badge bg-gray/10 text-gray mt-1 inline-block">开通18个月解锁</span>
                                    </div>
                                    <span class="text-xs badge bg-danger/10 text-danger">已过期</span>
                                </div>
                                <div class="flex flex-wrap gap-x-6 gap-y-2 mt-2 text-sm">
                                    <div class="flex items-center text-gray">
                                        <i class="fa fa-refresh mr-1 text-gray"></i>
                                        <span>剩余 0/1 次/月</span>
                                    </div>
                                    <div class="flex items-center text-gray">
                                        <i class="fa fa-calendar mr-1 text-gray"></i>
                                        <span>2024-04-30已过期</span>
                                    </div>
                                </div>
                                <p class="text-xs text-gray mt-2">专业造型设计服务7折优惠</p>
                            </div>
                        </div>
                    </div>
                </div>
              
            </div>
        </main>

        <!-- 底部导航 -->
        <footer class="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-white border-t border-lightgray py-2 px-8">
            <div class="flex justify-between">
                <a href="index.html" class="flex flex-col items-center text-gray">
                    <i class="fa fa-home text-lg"></i>
                    <span class="text-xs mt-1">首页</span>
                </a>
                <a href="store-list.html" class="flex flex-col items-center text-gray">
                    <i class="fa fa-map-marker text-lg"></i>
                    <span class="text-xs mt-1">门店</span>
                </a>
                <a href="appointment.html" class="flex flex-col items-center text-gray">
                    <i class="fa fa-calendar text-lg"></i>
                    <span class="text-xs mt-1">预约</span>
                </a>
                <a href="my-page.html" class="flex flex-col items-center text-primary">
                    <i class="fa fa-user text-lg"></i>
                    <span class="text-xs mt-1">我的</span>
                </a>
            </div>
        </footer>
    </div>

    <script>
        // 标签切换功能
        document.querySelectorAll('.tab-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                // 移除所有标签的活跃状态
                document.querySelectorAll('.tab-btn').forEach(el => {
                    el.classList.remove('text-primary', 'border-primary');
                    el.classList.add('text-gray', 'border-transparent');
                });
                
                // 设置当前标签为活跃状态
                this.classList.remove('text-gray', 'border-transparent');
                this.classList.add('text-primary', 'border-primary');
                
                // 根据标签筛选权益
                const tabType = this.textContent.trim();
                filterBenefits(tabType);
            });
        });
        
        // 根据标签筛选权益
        function filterBenefits(type) {
            const benefits = document.querySelectorAll('.benefit-card');
            
            benefits.forEach(benefit => {
                if (type === '全部权益') {
                    benefit.style.display = 'block';
                } else if (type === '有效权益') {
                    if (benefit.classList.contains('expired')) {
                        benefit.style.display = 'none';
                    } else {
                        benefit.style.display = 'block';
                    }
                } else if (type === '已过期') {
                    if (benefit.classList.contains('expired')) {
                        benefit.style.display = 'block';
                    } else {
                        benefit.style.display = 'none';
                    }
                }
            });
        }
        
        // 过期权益点击事件
        document.querySelectorAll('.benefit-card.expired').forEach(card => {
            card.addEventListener('click', function(e) {
                e.preventDefault();
                return false;
            });
        });
        
        // 底部导航交互
        document.querySelectorAll('footer a').forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                document.querySelectorAll('footer a').forEach(el => {
                    el.classList.remove('text-primary');
                    el.classList.add('text-gray');
                });
                this.classList.add('text-primary');
                this.classList.remove('text-gray');
            });
        });
    </script>
</body>
</html>
    